<template>
	<view class="all" :style="{'height':widHeight + 'px'}">
		<view class="all-1">
			<view class="swiActs">
				<view class="swiActs-5">切换账号登录</view>
				<view class="swiActs-6">轻触账号以登录</view>
			</view>
			<view class="swiActs-10" v-if="accountNumber.length > 0" v-for="(item,index) in accountNumber" :key="index">
				<view class="swiActs-1" @click="changingOver(item.username)">
					<view class="swiActs-2">
						<image class="img" mode="aspectFit" :src="userinfo.avatarUrl" v-if='usernames == item.username'>
						</image>
						<image class="img" mode="aspectFit" src="../../static/头像.png" v-else></image>
					</view>
					<view class="swiActs-3" v-if='item.username == "admin" '>
						小懒
					</view>
					<view class="swiActs-3" v-else>
						{{item.username}}
					</view>
					<view class="ccrent" v-if="usernames == item.username">
					
						当前登录
					</view>
				</view>
				<view class="" v-if="usernames !== item.username" @click="deletereg(item.username)">
					<uni-icons type="trash-filled" size="24" color='#c00000'></uni-icons>
				</view>
			</view>
			<view class="swiActs-4" @click="addreg">
				<image class="" mode="aspectFit" src="../../static/加号 (2).png"></image>
				<text>添加账号</text>
			</view>
		</view>
		<myModal v-if="delet" contents="确定删除此账号？" @confirm='confirm' @cancel='cancel'></myModal>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				widHeight: 0,
				usernames: '', //用户名
				deleteUsername: '', //删除用户名
				user: '', //切换的用户名
				delet: false, //是否打开提示框
				select: false, //是否切换账号
			};
		},
		onLoad() {
			uni.$setNavigationBarColor()
			if (this.userinfo.nickName == "小懒") {
				this.usernames = 'admin'
			} else {
				this.usernames = this.userinfo.nickName
			}
			
			const windowInfo = uni.getWindowInfo()
			this.widHeight = windowInfo.windowHeight //可使用窗口宽度
		},
		computed: {
			...mapState("login", ["accountNumber", 'userinfo']),
		},
		methods: {
			...mapMutations('login', ["deleteAccountNumber", "updateToken", "updateUserInfo"]),

			addreg() {
				uni.navigateTo({
					url: '/subCustomer/register/register?add=' + '添加账号'
				})
			},
			//切换账号
			changingOver(username) {
				if(this.usernames == username){
					 return;
				}
				this.user = username
				this.select = true //切换账号
				this.delet = true
			},
			//打开提示快
			deletereg(username) {
				this.delet = true
				this.deleteUsername = username
			},
			//删除账号
			confirm() {
				if (this.select) {
					this.login()
				} else {
					this.deleteAccountNumber(this.deleteUsername)
				}
				this.cancel()

			},
			//切换
			login() {
				const token =
					"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo"
				this.updateToken(token)
				let userinfo = {}
				if (this.user == 'admin') {
					userinfo.nickName = "小懒"
					userinfo.avatarUrl = "../../static/login.jpg"
					userinfo.phone = "15678831312"
				} else {
					userinfo.nickName = this.user
					userinfo.avatarUrl = "../../static/login.jpg"
					this.accountNumber.filter(item => item.username == this.user).forEach(itemuse => userinfo.phone = itemuse
						.phone)
				}
				let data = new Date()
				let year = data.getFullYear()
				let Month = data.getMonth()
				let Day = data.getDay()
				let Hours = data.getHours()
				let Minutes = data.getMinutes()
				userinfo.time = year + '-' + Month + '-' + Day + ':' + Hours + '-' + Minutes

				this.updateUserInfo(userinfo)
					uni.vibrateLong()
				uni.$showToast("切换成功")
				setTimeout(() => {
					uni.switchTab({
						url: "/pages/my/my"
					})
				}, 1000)
			},
			//取消提示框
			cancel() {
				this.delet = false
				this.select = false
			},
		},
	}
</script>

<style lang="scss">
	.all {

		background-color: #f8f9f9;


		.all-1 {
			width: 90%;
			margin: 0 auto;
			padding-top: 15px;
		
			.swiActs-5 {
				font-weight: 800;
				font-size: 24px;
				padding-bottom: 5px;
			}

			.swiActs-6 {
				color: #606a7a;
				font-size: 16px;
			}

			.swiActs-10 {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.swiActs-1 {
					display: flex;

					align-items: center;


					.swiActs-2 {
						width: 55px;
						height: 55px;
						border-radius: 50%;
						background-color: #dee1e6;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 25px 10px 10px 0;


						.img {
							border-radius: 50%;
							width: 52px;
							height: 52px;

						}
					}

					.ccrent {
						margin-left: 10px;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 60px;
						height: 20px;
						border-radius: 10px;
						background-color: #83e065;
						font-size: 12px;
						color: #fff;
					}
				}

			}

			.swiActs-4 {
				margin-top: 20px;

				image {
					vertical-align: middle;
					margin-right: 15px;
					width: 40px;
					height: 40px;
				}
			}

			.text {
				font-size: 14px;
			}
		}

	}
</style>